HTMLify

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #000;
}

@property --a {
  syntax: "<angle>";
  initial-value: 45deg;
  inherits: true;
}

@property --r {
  syntax: "<angle>";
  initial-value: 5deg;
  inherits: true;
}

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

img {
  --c: #bec1c9;
  width: 250px;
  aspect-ratio: 1;
  border-radius: 25px;
  border: 4px solid #0000;
  padding: 10px;
  background:
    conic-gradient(from var(--a),
      #0000 calc(30% - var(--p)),
      var(--c) calc(50% - var(--p)) calc(50% + var(--p)),
      #0000 calc(70% + var(--p))) border-box;
  --g: linear-gradient(#000 0 0);
  -webkit-mask:
    var(--g), var(--g) padding-box,
    conic-gradient(from var(--a),
      #000d calc(30% - var(--p)),
      #000 calc(50% - var(--p)) calc(50% + var(--p)),
      #000d calc(70% + var(--p))) content-box;
  mask:
    var(--g), var(--g) padding-box,
    conic-gradient(from var(--a),
      #000d calc(30% - var(--p)),
      #000 calc(50% - var(--p)) calc(50% + var(--p)),
      #000d calc(70% + var(--p))) content-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  --_t: perspective(450px);
  animation: 4s linear infinite;
  animation-name: a, r;
  transition: --p .5s, --r .4s;
  cursor: pointer;
}

img:hover {
  --p: 50%;
  --r: 0deg;
  animation-play-state: paused;
}

@keyframes a {
  to {
    --a: 405deg
  }
}

@keyframes r {

  0%,
  100% {
    transform: var(--_t) rotate3d(1, 1, 0, var(--r))
  }

  12.5% {
    transform: var(--_t) rotate3d(0, 1, 0, var(--r))
  }

  25% {
    transform: var(--_t) rotate3d(-1, 1, 0, var(--r))
  }

  37.5% {
    transform: var(--_t) rotate3d(-1, 0, 0, var(--r))
  }

  50% {
    transform: var(--_t) rotate3d(-1, -1, 0, var(--r))
  }

  62.5% {
    transform: var(--_t) rotate3d(0, -1, 0, var(--r))
  }

  75% {
    transform: var(--_t) rotate3d(1, -1, 0, var(--r))
  }

  87.5% {
    transform: var(--_t) rotate3d(1, 0, 0, var(--r))
  }
}